<template>
  <div style="min-height: 300px;">
    <div class="addtitle">建议收集箱</div>
    <a-row style="padding-right: 6px; margin-top: 10px">
      <a-col :xxl="6" :xl="6" :sm="2" :xs="0" :md="4" :lg="4"></a-col>
      <a-col :xxl="12" :xl="12" :sm="20" :xs="24" :md="16" :lg="16">
        <a-form ref="yijianForm" :model="entity" :rules="rules" label-width="100px">
          <a-form-item label="建议分类" field="yijiantypeid">
            <a-select v-model="entity.yijiantypeid" placeholder="请选择分类..." allow-clear>
              <a-option :value="t.id" v-for="t in typeList" :key="t.id">{{t.title}}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="内容" field="contents">
            <a-textarea v-model="entity.contents"  ref="contents" placeholder="建议内容" :auto-size="{minRows:5,maxRows:15}"></a-textarea>
          </a-form-item>
          <a-form-item>
            <a-popconfirm content="确认提交吗?" @ok="btnSubmit">
              <a-button type="primary" size="mini">提交</a-button>
            </a-popconfirm>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :xxl="6" :xl="6" :sm="2" :xs="24" :md="4" :lg="4"></a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {uuid} from "@/utils";
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const yijianForm = ref(null)
let entity = ref({
  contents: '',
  yijiantypeid: undefined,
  cdefine1: '',
  cdefine2: '',
  uuid:uuid(),
  token: "iraeta-" + uuid(),
})
const typeList = ref([]);
const rules = reactive({
  contents: [
    { required: true, message: '请输入建议内容', trigger: 'blur' },
  ],
  yijiantypeid: [
    { required: true, message: '请选择建议分类', trigger: 'blur' },
  ]
})
const loadTypeList = ()=>{
  axios.post('/yijian/pageyijiantype',{}).then( (res) =>{
    const {code,msg, data} = res;
    if(code == '200'){
      typeList.value = data
    }
  })
}
const btnSubmit = ()=>{
  if(!yijianForm.value) return;
  yijianForm.value.validate().then((errors) =>{
    if(!errors){
      axios.post('/yijian/addedityijianbox', entity.value).then( (res) =>{
        const {code,msg, data} = res;
        if(code != '200'){
          Message.error(msg);
        }else{
          Message.success('建议提交成功')
          yijianForm.value.resetFields()
        }
      })
    }else{
      return false;
    }
  })
}
onMounted(()=>{
  loadTypeList()
  nextTick(()=>{
  })
})
</script>

<style scoped lang="less">
.addtitle{
  background-color: #007460;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}
</style>
